<template>
    <el-upload
            class="upload-demo"
            drag
            action=""
            :before-upload="onUpload"
            accept="image/*"
            :disable="loading"
            >
        <i :class="uploadStatus()"></i>
        <div v-if="loading">
            <div class="el-upload__text">{{percent}}%</div>
        </div>
        <div v-else>
            <div class="el-upload__text" v-if="url.length===0">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__text" v-else>将文件拖到此处，或<em>点击更改</em></div>
        </div>

    </el-upload>


</template>
<style lang="scss" scoped>
    .selector {
        visibility: hidden;
    }

    .icon {
        font-size: 67px;
        color: #c0c4cc;
        margin: 40px 0 16px;
        line-height: 50px;
    }

    .icon-ok {
        color: #67C23A;
    }
</style>
<script lang="ts">

    import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
    import {Api} from '@/api/image'
    import * as qiniu from 'qiniu-js'

    @Component({
        name: "AdminFileUpload",
    })
    export default class AdminFileUpload extends Vue {

        loading:boolean = false;

        @Prop({
            required:true,
            type:String
        })
        zone;

        @Prop({
            required:true,
            type:String
        })
        value:string;


        url:string = "";
        percent:number = 0;

        uploadStatus(): string {

            if(this.loading) {
                return "el-icon-loading icon"
            }

            if(this.url.length !== 0) {
                return "el-icon-success icon icon-ok"
            }else{
                return "el-icon-upload icon"
            }
        }


        onUpload(file:File) : boolean {

            this.loading = true;


            Api.Image.GetUploadToken({zone:this.zone})
                .then((ack) => {

                    let observable = qiniu.upload(
                        file,
                        ack.key,
                        ack.token,
                        {
                            fname: file.name,
                            params: {},
                            mimeType: null},
                        {});

                    console.log(observable);

                    let subscription = observable.subscribe(
                        (res) => {
                            this.percent = res.total.percent;
                        },
                        (err) => {
                            console.log("ee",err);
                            this.loading = false;
                        },
                        (res) =>{
                            this.loading = false;
                            this.url = ack.url;
                            this.$emit('upload', ack.url)
                        }
                    );
                })
                .catch((err) => {
                    this.loading = false;
                });

            return false

        }

        @Watch('value')
        onValueChange() {
            this.url = this.value;
        }



        mounted() {
            this.url = this.value;
        }
    }
</script>